<!--
 * @Description: 购物车页面
 * @Author: rendc
 * @Date: 2023-03-02 10:45:05
 * @LastEditors: 锡诚 3343785462@qq.com
 * @LastEditTime: 2023-03-06 22:49:52
-->
<script setup>
  const swipeClick = (e) => {
  console.log(" CC - swipeClick - e:", e);
};
</script>
<template>
  <van-nav-bar title="购物车"></van-nav-bar>
  <div class="main">
    <van-cell v-for="item in list" :key="item" :title="item" />
<van-back-top right="15vw" bottom="10vh" />
    <div class="cartempty">
      <img src="https://dsfs.oppo.com/miniprogram/images/emptyStatus/cart-no.png" class="cart_empty_icon">
      <div class="cart_empty_text">购物车还没有商品</div>
      <div class="gohome" to="/index">去逛逛</div>
      <!-- <van-cell title="路由跳转" is-link to="index" /> -->
    </div>
    <div class="middle">
      <van-divider>为你推荐</van-divider>
      </div>
    </div>
    <div class="commodity">
      <div class="commodity1">
        <div class="icon">
          <img class="iconImg" src="https://dsfs.oppo.com/omp/1644308322244-_-85b29b5e82a942d3bd92de3cf52f7d3a.png?_w_=320&_h_=320&x-oss-process=image/format,webp"/>
        </div>
        <div class="title">OPPO A96 8G+126G 琉璃幻彩 </div>
        <div class="benefit">
          <div class="flex_text">赠</div>
          <div class="benefit_right">
            <!-- float:right; -->
            <span class="label">券</span>
            <span class="value">满700减10</span>
          </div>
        </div>
        <div class="price">
          <span class="price-profix">到手价</span>
          <span class="money">
            <span class="moneylabel">￥</span>
            <span>1359</span>
          </span>
        </div>
      </div>
      <div class="commodity2">
        <div class="icon">
          <img class="iconImg" src="https://dsfs.oppo.com/omp/1650523326775-_-af776462bd924d01a14087a85579fe9f.png?_w_=320&_h_=320&x-oss-process=image/format,webp"/>
        </div>
        <div class="title">一加 Ace 8GB+256GB 回蓝 官方标准 </div>
        <div class="benefit">
          <div class="flex_text">赠</div>
          <div class="benefit_right">
            <!-- float:right; -->
            <span class="label">券</span>
            <span class="value">满1000减100</span>
          </div>
        </div>
        <div class="price">
          <span class="price-profix">到手价</span>
          <span class="money">
            <span class="moneylabel">￥</span>
            <span>2099</span>
          </span>
        </div>
      </div>
      <div class="commodity3">
        <div class="icon">
          <img class="iconImg" src="https://dsfs.oppo.com/archives/202106/2021063004064360dc268b3a3ec.png?_w_=320&_h_=320&x-oss-process=image/format,webp"/>
        </div>
        <div class="title">柚家竹纤维手帕纸(18组 包) 竹浆原色</div>
        <div class="benefits">积分抵10元</div>
        <div class="price">
          <span class="money">
            <span class="moneylabel">￥</span>
            <span>12.9</span>
          </span>
        </div>
      </div>
      <div class="commodity4">
        <div class="icon">
          <img class="iconImg" src="https://dsfs.oppo.com/omp/1666949620241-_-b7ad34ed3acd4308a405cf75a2b4dfe0.png?_w_=1080&_h_=1080&x-oss-process=image/format,webp"/>
        </div>
        <div class="title">OPPO Type-C 闪充数据线 白色</div>
        <div class="price">
          <span class="money">
            <span class="moneylabel">￥</span>
            <span>49</span>
          </span>
        </div>
      </div>
      <div class="commodity5">
        <div class="icon">
          <img class="iconImg" src="https://dsfs.oppo.com/omp/1650523326703-_-464caf32c38540eca539b3a036f79125.png?_w_=320&_h_=320&x-oss-process=image/format,webp"/>
        </div>
        <div class="title">一加 Ace 12GB+512GB 开黑官方标配</div>
        <div class="benefit">
          <div class="benefit_left">3期免息</div>
          <div class="flex_text">赠</div>
        </div>
        <div class="price">
          <span class="price-profix">到手价</span>
          <span class="money">
            <span class="moneylabel">￥</span>
            <span>2499</span>
          </span>
        </div>
      </div>
      <div class="commodity6">
        <div class="icon">
          <img class="iconImg" src="https://dsfs.oppo.com/omp/1646102689304-_-8678f481bde04dd6a00aaf580737c688.png?_w_=320&_h_=320&x-oss-process=image/format,webp"/>
        </div>
        <div class="title">OPPO Find X5 雅白 8GB+128GB 官方标配</div>
        <div class="benefit">
          <div class="benefit_left">24期免息</div>
          <div class="flex_text">赠</div>
        </div>
        <div class="price">
          <span class="price-profix">到手价</span>
          <span class="money">
            <span class="moneylabel">￥</span>
            <span>2989</span>
          </span>
        </div>
      </div>
    </div>
    
  </template>
<style lang="less" scoped>
.main{
  background-color: #f7f8fa;
  .cartempty{
    // width:343px;
    height:190px;
    text-align: center;
    .cart_empty_icon{
      width:140px;
      height:140px;
      vertical-align: bottom;
    }
    .cart_empty_text{
      color: #0000004D;
      font-size: 14px;
      height:20px;
    }
    .gohome{
      color: #F34141;
      display: inline-block;
      margin-top: 12px;
      font-weight: 500;
      font-size: 14px;
      text-align: center;
      height:20px;
    }
  }
  .middle{
    height: 40px;
    margin: 0;
  }
  
}
:deep(.van-nav-bar__title){
  max-width: 60%;
  margin: 0 auto;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  font-size: 17px;
} 
.commodity{
  // display: flex;
    .commodity1{
      display: inline-block;
      padding:12px;
      // text-align: left;
      height:287px;
      width:150px;
      background-color: #ffffff;
    }
    .title{
      height: 145px;
      height: 40px;
      margin-top: 10px;
      font-size: 14px;
    }
    .benefit{
      display: flex;
      margin-top: 4px;
      height: 20px;
      .flex_text{
        margin-right: 4px;
        height: 16px;
        font-size:4px;
        color: red;
        border:1px solid rgba(243,65,65,0.5);
        background-color: #ffffff;
      }
      .benefit_right{
        // margin-top: 4px;
        // margin-right: 4px;
        // padding-right: 4px;
        background:url(E:\jiepu\chengyuemo1\vue-project\src\assets\icon100.png) ;
        background-size: 85px 16px;
        width:85px;
        height: 16px;
        font-size: 12px;
        color: #f34141;
        .label{
          padding-right: 4px;
          background-color: #f634341f;
        }
      } 
    }
    .commodity2{
      display: inline-block;
      padding:12px;
      // text-align: left;
      height:287px;
      width:150px;
      background-color: #ffffff;
    }
    .title{
      height: 145px;
      height: 40px;
      margin-top: 10px;
      font-size: 14px;
    }
    .benefit{
      display: flex;
      margin-top: 4px;
      height: 20px;
      .flex_text{
        margin-right: 4px;
        height: 16px;
        font-size:4px;
        color: red;
        border:1px solid rgba(243,65,65,0.5);
        background-color: #ffffff;
      }
      .benefit_right{
        // margin-top: 4px;
        // margin-right: 4px;
        // padding-right: 4px;
        background:url(E:\jiepu\chengyuemo1\vue-project\src\assets\icon1.png) ;
        background-size: 102px 16px;
        width:102px;
        height: 16px;
        font-size: 12px;
        color: #f34141;
        .label{
          padding-right: 4px;
          background-color: #f634341f;
        }
      }
    }
    .commodity3{
      padding:12px;
      display: inline-block;
      width:150px;
      .title{
        width:145px;
      }
      .benefits{
        margin-top: 12px;
        width:70px;
        height:16px;
        color: #f34141;
        border: 1px solid rgba(243,65,65,0.5);
        font-size: 12px;

      }
    }
    .commodity4{
      padding:12px;
      display: inline-block;
      width:150px;
      .title{
        width:145px;
      }
    }
    .commodity5{
      padding:12px;
      display: inline-block;
      width:150px;
      .title{
        width:145px;
        height:60px;
      }
      .benefit{
        display: flex;
        margin-top: 4px;
        height: 20px;
        .benefit_left{
          margin-right: 4px;
          font-size: 12px;
          color: #007aff;
          border:1px solid rgba(0,122,255,0.5);
          width:50px;
          height:16px;
        }
      }
    }
    .commodity6{
      padding:12px;
      display: inline-block;
      width:150px;
      .title{
        width:145px;
        height:60px;
      }
      .benefit{
        display: flex;
        margin-top: 4px;
        height: 20px;
        .benefit_left{
          margin-right: 4px;
          font-size: 12px;
          color: #007aff;
          border:1px solid rgba(0,122,255,0.5);
          width:50px;
          height:16px;
        }
      }
    }
    .price{
      height: 19px;
      color: #000000D9;
      margin-top: 12px;
      font-size: 15.5px;
      .price-profix{
        font-size: 5px;
      }
      .money{
        .moneylabel{
          font-size:2px;
        }
      }
      
    }
  }
.iconImg{
  height:169px;
  width:169px;
}
</style>
<style>
:root{
  --van-divider-text-color:#000000;
  --van-divider-margin:14px;
  --van-divider-line-height:12px;
  
}
</style>